<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>用户列表</title>

    <link rel="stylesheet" type="text/css" th:href="@{/pubilc/plugin/layui/css/layui.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/pubilc/plugin/css/admin.css}"/>
</head>

<body>
<div class="page-content-wrap">
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">标题</label>
                <div class="layui-input-inline">
                    <input type="text" name="title" required placeholder="标题" autocomplete="off"
                           class="layui-input">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">类型</label>
                <div class="layui-input-block">
                    <select name="kind" lay-filter="kind">
                        <option value=""></option>
                        <option value="1">求学</option>
                        <option value="2">交流</option>
                        <option value="3">技能分享</option>
                        <option value="4">技能服务</option>
                        <option value="5">场地租玩</option>
                        <option value="6">既时活动</option>
                        <option value="7">社区话题</option>
                        <option value="8">指点</option>
                        <option value="9">请教</option>
                        <option value="10">动态</option>
                        <option value="12">课程</option>
                    </select>
                </div>
            </div>
            <button class="layui-btn layui-btn-normal" lay-filter="search" lay-submit>搜索</button>
        </div>
    </form>
    <div class="layui-form" id="table-list">

        <table class="layui-hide" id="table" lay-filter="table"></table>
    </div>
</div>
<script th:src="@{/pubilc/plugin/layui/layui.js}" type="text/javascript" charset="utf-8"></script>
<script th:src="@{/pubilc/plugin/js/common.js}" type="text/javascript" charset="utf-8"></script>

<script type="text/html" id="barTool" lay-filter="barTool">
    <a class="layui-btn layui-btn-success layui-btn-xs" lay-event="detail">详情</a>
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script>
    layui.use(['jquery', 'table', 'form'], function () {
        var $ = layui.jquery;
        var table = layui.table;
        var form = layui.form;

        var tableIns = table.render({
            elem: '#table'
            , url: parent.basePath + '/play/page/getUnitList'
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , page: true
            , limit: 15
            , autoSort: false
            , cols: [[
                {field: 'id', width: 80, title: 'ID', sort: true}
                , {field: 'userId', width: 80, title: '用户ID'}
                , {
                    field: 'kind', width: 120, title: '类型', sort: true, templet: function (d) {
                        if (d.kind == 1) {
                            return '求学';
                        }
                        if (d.kind == 2) {
                            return '交流';
                        }
                        if (d.kind == 3) {
                            return '技能分享';
                        }
                        if (d.kind == 4) {
                            return '技能服务';
                        }
                        if (d.kind == 5) {
                            return '场地租玩';
                        }
                        if (d.kind == 6) {
                            return '既时活动';
                        }
                        if (d.kind == 7) {
                            return '社区话题';
                        }
                        if (d.kind == 8) {
                            return '指点';
                        }
                        if (d.kind == 9) {
                            return '请教';
                        }
                        if (d.kind == 10) {
                            return '动态';
                        }
                        if (d.kind == 12) {
                            return '课程';
                        }
                        return d.kind;
                    }
                }
                , {field: 'title', width: 200, title: '标题', sort: true}
                , {field: 'content', width: 200, title: '内容'}
                , {field: 'image', width: 150, title: '照片'}
                , {field: 'latitude', title: '纬度'}
                , {field: 'longitude', title: '经度'}
                , {field: 'name', title: '名称'}
                , {field: 'address', title: '地址'}
                , {field: 'scope', width: 150, title: '范围'}
                , {field: 'form', title: 'form'}
                , {field: 'least_course_num', title: 'least_course_num'}
                , {field: 'least_price', title: 'least_price'}
                , {field: 'price', title: 'price'}
                , {field: 'max_person', title: '允许人数'}
                , {field: 'date', title: '日期', width: 150, sort: true}
                , {field: 'time_len', title: 'time_len'}
                , {field: 'tool', title: 'tool'}
                , {field: 'young_or_old', title: 'young_or_old'}
                , {field: 'join_num', title: '报名人数', sort: true}
                , {field: 'is_public', title: 'is_public'}
                , {field: 'tel', title: '电话'}
                , {field: 'addr', title: 'addr'}
                , {field: 'traffic', title: 'traffic'}
                , {field: 'created_time', title: '创建时间', sort: true}
                , {field: 'update_time', title: '更新时间', sort: true}
                , {field: 'status', title: '状态'}
                , {fixed: 'right', title: '操作', toolbar: '#barTool', width: 180}

            ]]
            , response: {
                countName: 'total' //规定数据总数的字段名称，默认：count
                , dataName: 'list' //规定数据列表的字段名称，默认：data
            }
        });

        //查询
        form.on('submit(search)', function (data) {
            tableIns.reload({where: data.field});
            return false
        });


        //工具栏事件
        table.on('tool(table)', function (obj) {
            switch (obj.event) {

                case 'detail':
                    layer.open({
                        type: 1,
                        area: ['80%', '80%'],
                        scrollbar: false,
                        title: '详情',
                        content: $('#ListForm'),
                        shade: 0
                    });
                    $("#ListFormBtn").hide();
                    setValue(obj.data);
                    break;

                case 'edit':
                    layer.open({
                        type: 1,
                        area: ['80%', '80%'],
                        scrollbar: false,
                        title: '修改',
                        content: $('#ListForm'),
                        shade: 0
                    });
                    setValue(obj.data);
                    $("#ListFormBtn").show();
                    break;

                case 'del':
                    //询问框
                    layer.confirm('您确定要删除吗？', {
                        btn: ['确定', '取消'] //按钮
                    }, function () {
                        $.ajax({
                            url: parent.basePath + '/play/page/delUnit',
                            data: {
                                unitId: obj.data.id,
                            },
                            type: "POST",
                            cache:
                                false,
                            dataType:
                                'json',
                            error:

                                function (request) {
                                    alert("发送请求失败！");
                                }

                            ,
                            success: function (json) {
                                if (json.code == 0) {
                                    layer.msg(json.msg);
                                    setTimeout(function () {
                                        tableIns.reload();
                                    }, 1000);
                                } else {
                                    layer.msg(json.msg);
                                }
                            }
                        })
                        ;


                    }, function () {
                        return;
                    });
                    break;
            }
        });


        //赋值
        function setValue(data) {
            for (index in $("#ListForm form input")) {
                let name = $("#ListForm form input")[index].name;
                if (name != '') {
                    $("[name=" + name + "]").val(data[name]);
                }
            }
        };

        //修改提交
        form.on('submit(submit)', function (data) {
            layer.confirm('您确定修改吗？', {
                btn: ['确定', '取消'] //按钮
            }, function () {
                $.ajax({
                    url: parent.basePath + '/play/page/updateUnit',
                    data: data.field,
                    type: "POST",
                    cache: false,
                    dataType: 'json',
                    error: function (request) {
                        alert("发送请求失败！");
                    },
                    success: function (json) {
                        if (json.code == 0) {
                            layer.msg(json.msg);
                            setTimeout(function () {
                                layer.closeAll();
                                tableIns.reload();
                            }, 1000);
                        } else {
                            layer.msg(json.msg);
                        }
                    }
                });
            }, function () {
                layer.close(layer.index);
                return false;
            });

            return false
        });

        //关闭按钮
        form.on('submit(close)', function (data) {
            layer.closeAll();
            return false;
        });


        //监听排序事件
        table.on('sort(table)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            //有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：
            tableIns.reload({
                initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。
                , where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                    order: obj.field + ' ' + obj.type //排序方式
                }
            });

        });


    });
</script>


<div style="display: none" id="ListForm" lay-filter="ListForm">
    <form class="layui-form" action="">
        <input type="text" name="id" autocomplete="off" class="layui-input" type="hidden">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">ID</label>
                <div class="layui-input-inline">
                    <input type="text" name="id" autocomplete="off" class="layui-input" readonly>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">用户ID</label>
                <div class="layui-input-inline">
                    <input type="text" name="userId" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>


        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">类型</label>
                <div class="layui-input-inline">
                    <input type="text" name="kind" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">标题</label>
                <div class="layui-input-inline">
                    <input type="text" name="title" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">内容</label>
            <div class="layui-input-block">
                <input type="text" name="content" autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">照片</label>
            <div class="layui-input-block">
                <input type="text" name="image" autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">纬度</label>
                <div class="layui-input-inline">
                    <input type="text" name="latitude" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">经度</label>
                <div class="layui-input-inline">
                    <input type="text" name="longitude" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">地址</label>
            <div class="layui-input-block">
                <input type="text" name="address" autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">范围</label>
            <div class="layui-input-block">
                <input type="text" name="scope" autocomplete="off"
                       class="layui-input">
            </div>
        </div>


        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">form</label>
                <div class="layui-input-inline">
                    <input type="text" name="form" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">least_course_num</label>
                <div class="layui-input-inline">
                    <input type="text" name="least_course_num" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>


        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">least_price</label>
                <div class="layui-input-inline">
                    <input type="text" name="least_price" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">价格</label>
                <div class="layui-input-inline">
                    <input type="text" name="price" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">允许人数</label>
                <div class="layui-input-inline">
                    <input type="text" name="max_person" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">日期</label>
                <div class="layui-input-inline">
                    <input type="text" name="date" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>


        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">time_len</label>
                <div class="layui-input-inline">
                    <input type="text" name="time_len" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">tool</label>
                <div class="layui-input-inline">
                    <input type="text" name="tool" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>


        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">young_or_old</label>
                <div class="layui-input-inline">
                    <input type="text" name="young_or_old" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">报名人数</label>
                <div class="layui-input-inline">
                    <input type="text" name="join_num" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>


        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">is_public</label>
                <div class="layui-input-inline">
                    <input type="text" name="is_public" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">电话</label>
                <div class="layui-input-inline">
                    <input type="text" name="tel" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">addr</label>
                <div class="layui-input-inline">
                    <input type="text" name="addr" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">traffic</label>
                <div class="layui-input-inline">
                    <input type="text" name="traffic" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">课程类型</label>
                <div class="layui-input-inline">
                    <input type="text" name="classType" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">教学方式（","隔开）</label>
                <div class="layui-input-inline">
                    <input type="text" name="classTreeType" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">价格（","隔开）</label>
                <div class="layui-input-inline">
                    <input type="text" name="classMoney" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>


        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">创建时间</label>
                <div class="layui-input-inline">
                    <input type="text" name="created_time" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">更新时间</label>
                <div class="layui-input-inline">
                    <input type="text" name="update_time" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">状态</label>
                <div class="layui-input-inline">
                    <input type="text" name="status" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-row" id="ListFormBtn">
            <div class="layui-col-md4 layui-col-md-offset4">
                <div class="layui-form-item">
                    <button class="layui-btn layui-btn-normal" lay-filter="submit" lay-submit>提交</button>
                    <button class="layui-btn layui-btn-danger" lay-filter="close" lay-submit>关闭</button>
                </div>
            </div>
        </div>

    </form>
</div>


</body>

</html>